<!-- <!DOCTYPE>声明：是指示web浏览器关于页面使用哪个HTML版本进行编写的指令 -->
<!-- <!DOCTYPE>声明：不是HTML标签。HTML5不基于SGML，所以不需要引用DTD -->
<!DOCTYPE html>
<!-- <html>与</html>标签：限定了文档的开始点和结束点 -->
<html lang="zh">
<!-- head标签：定义文档的头部 -->
<head>
    <!-- meta标签：描述性标签，描述网站的一些信息 -->
    <meta charset="UTF-8"/>
    <!-- title标签：网页标题 -->
    <title>订单管理系统</title>
    <!-- meta标签：一般用来做SEO（搜索引擎优化） -->
    <meta name="keywords" content="道璞,订单,订单管理,订单管理系统"/>
    <meta name="description" content="道璞订单管理系统"/>
    <link rel="shortcut icon" type="image/x-icon" href="../image/notebook2.svg"/>
    <link rel="stylesheet" href="../css/style.css">
</head>
<!-- body标签：定义文档的主体 -->
<body onload="init()">
<!-- 布局标签（结构化语义标签） -->
<!-- header标签：定义文档的页眉（介绍信息） -->
<header></header>
<!-- nav标签：定义导航链接的部分 -->
<nav></nav>
<!-- aside标签：可用作文章的侧栏 -->
<aside></aside>
<!-- main标签：规定文档的主要内容。一个网页只能有一个main标签 -->
<!-- main标签：是网页的特异性部分，不应该包含网页中复用的部分 -->
<main>
    <div class="mainbox">
        <div class="updateOrderBox">
            <div id="title">
                修改工单
            </div>
            <table id="updateOrderTable" width="400px">
                <tr>
                    <td>
                        <p id="accountP" align="left">旺旺号：</p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>
                            颜色：
                            <select name="color" class="Input" >
                                <option value ="黑色">黑色</option>
                                <option value ="香槟色">香槟色</option>
                            </select>
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>（㎜）<input name="clothesRodLength" class="Input" placeholder="衣杆长度（㎜）"
                                         oninput="value=value.replace(/[^\d]/g,'')" onBlur="clothesRodLengthCheck(this)"/></label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>数量：<input name="quantity" class="Input" placeholder="数量"
                                         oninput="value=value.replace(/[^\d]/g,'')" onBlur="onBlurBox(this)"/></label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="button-login" onclick="saveOrder()">确定</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</main>
<!-- footer标签：定义文档或节的页脚 -->
<footer></footer>
</body>
<script>
    const tableRows = document.getElementById("updateOrderTable").rows;
    function init() {
        const value = location.search.substring(1).split("&");
        document.getElementById("accountP").innerHTML += decodeURI(value[1].split("=")[1]);
        tableRows[1].cells[0].getElementsByTagName("select")[0].value = decodeURI(value[2].split("=")[1]);
        tableRows[2].cells[0].getElementsByTagName("input")[0].value = value[3].split("=")[1];
        tableRows[3].cells[0].getElementsByTagName("input")[0].value = value[4].split("=")[1];
    }
    function clothesRodLengthCheck(clothesRodLength) {
        onBlurBox(clothesRodLength);
        if (clothesRodLength.value < 0) {
            clothesRodLength.value = 0;
        }
        if (clothesRodLength.value > 6000) {
            alert("输入衣杆长度过长！");
            clothesRodLength.value = "";
        }
    }
    function onBlurBox(inputBox) {
        if (parseFloat(inputBox.value)) {
            inputBox.value = parseFloat(inputBox.value);
        }
    }
    function saveOrder() {
        const tableRows = document.getElementById("updateOrderTable").rows;
        const color = tableRows[1].cells[0].getElementsByTagName("select")[0].value;
        const clothesRodLength = tableRows[2].cells[0].getElementsByTagName("input")[0].value;
        const quantity = tableRows[3].cells[0].getElementsByTagName("input")[0].value;
        if (color === "" || clothesRodLength === "" || quantity === "") {
            alert("表格存在空值！");
            return;
        }
        const jsonText = "{\"id\":\"" + location.search.substring(1).split("&")[0].split("=")[1]
            + "\",\"color\":\"" + color
            + "\",\"clothesRodLength\":\"" + clothesRodLength
            + "\",\"quantity\":\"" + quantity + "\"}";
        const xhr = new XMLHttpRequest();
        xhr.open("PUT", "/order/updateOrder");
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(jsonText);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    alert("修改成功！");
                    window.location.replace('initOrder.html');
                } else {
                    alert("上传失败。");
                }
            }
        }
    }
</script>
</html>